<template>
  <div class="topn">
    <ul class="topn-cate">
      <li @mouseover="active = index" :class="{active: active == index}" v-for="(item, index) in cate" :key="index">
        {{item.cat_name}}
      </li>
    </ul>
    <div class="topn-goods">
      <div class="row" v-for="(item, index) in cate[active].goods" :key="index">
        <div class="col-2">
          <TopIcon :value="index+1"/>
        </div>
        <div class="col-4">
          <img :src="item.image" alt>
        </div>
        <div class="col-6">
          {{item.goods_name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopIcon from "~/components/TopIcon";

export default {
  components: {
    TopIcon
  },
  data() {
    return {
      active: 0, // 当前选中的分类下标
      cate: [
        {
          cat_name: "手机",
          goods: [
            {
              image:
                "http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/98730/7/16017/168439/5e787658E33102592/8af92912b811364a.jpg!q90.webp",
              goods_name:
                "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待"
            },
            {
              image:
                "http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/98730/7/16017/168439/5e787658E33102592/8af92912b811364a.jpg!q90.webp",
              goods_name:
                "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待"
            },
            {
              image:
                "http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/98730/7/16017/168439/5e787658E33102592/8af92912b811364a.jpg!q90.webp",
              goods_name:
                "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待"
            }
          ]
        },
        {
          cat_name: "厨房DIY",
          goods: [
            {
              image:
                "https://img12.360buyimg.com/mobilecms/s200x200_jfs/t1/42918/38/13221/152562/5d673947Ec794d9a0/0acc833da0fafcf0.jpg!q90.webp",
              goods_name:
                "金杞（JINQI） 桶装水电动抽水器 一键自动无线吸水器充电式 压水机加水器 便携式 S40升级款黑色"
            },
            {
              image:
                "https://img12.360buyimg.com/mobilecms/s200x200_jfs/t1/42918/38/13221/152562/5d673947Ec794d9a0/0acc833da0fafcf0.jpg!q90.webp",
              goods_name:
                "金杞（JINQI） 桶装水电动抽水器 一键自动无线吸水器充电式 压水机加水器 便携式 S40升级款黑色"
            },
            {
              image:
                "https://img12.360buyimg.com/mobilecms/s200x200_jfs/t1/42918/38/13221/152562/5d673947Ec794d9a0/0acc833da0fafcf0.jpg!q90.webp",
              goods_name:
                "金杞（JINQI） 桶装水电动抽水器 一键自动无线吸水器充电式 压水机加水器 便携式 S40升级款黑色"
            }
          ]
        },
        {
          cat_name: "手机",
          goods: [
            {
              image:
                "http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/98730/7/16017/168439/5e787658E33102592/8af92912b811364a.jpg!q90.webp",
              goods_name:
                "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待"
            },
            {
              image:
                "http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/98730/7/16017/168439/5e787658E33102592/8af92912b811364a.jpg!q90.webp",
              goods_name:
                "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待"
            },
            {
              image:
                "http://img11.360buyimg.com/mobilecms/s200x200_jfs/t1/98730/7/16017/168439/5e787658E33102592/8af92912b811364a.jpg!q90.webp",
              goods_name:
                "Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待"
            }
          ]
        },
        {
          cat_name: "厨房DIY",
          goods: [
            {
              image:
                "https://img12.360buyimg.com/mobilecms/s200x200_jfs/t1/42918/38/13221/152562/5d673947Ec794d9a0/0acc833da0fafcf0.jpg!q90.webp",
              goods_name:
                "金杞（JINQI） 桶装水电动抽水器 一键自动无线吸水器充电式 压水机加水器 便携式 S40升级款黑色"
            },
            {
              image:
                "https://img12.360buyimg.com/mobilecms/s200x200_jfs/t1/42918/38/13221/152562/5d673947Ec794d9a0/0acc833da0fafcf0.jpg!q90.webp",
              goods_name:
                "金杞（JINQI） 桶装水电动抽水器 一键自动无线吸水器充电式 压水机加水器 便携式 S40升级款黑色"
            },
            {
              image:
                "https://img12.360buyimg.com/mobilecms/s200x200_jfs/t1/42918/38/13221/152562/5d673947Ec794d9a0/0acc833da0fafcf0.jpg!q90.webp",
              goods_name:
                "金杞（JINQI） 桶装水电动抽水器 一键自动无线吸水器充电式 压水机加水器 便携式 S40升级款黑色"
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss">
.topn {
  &-goods {
    padding-bottom: 10px;
  }
  ul {
    margin-bottom: 10px;
  }
  li {
    display: inline-block;
    margin-left: 5px;
    padding: 2px 10px;
    border-radius: 20px;
    background: #eee;
    &.active {
      color: #fff;
      background-color: #e1251b;
    }
  }
  img {
    padding: 5px;
    width: 68%;
  }
  .col-6 {
    margin-top: 17px;
    height: 3em;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
  }
}
</style>